<template>
    <div :class="myStyle.containerStyle" class>
        <div :class="myStyle.titleStyle">{{ title }}</div>
        <div :class="myStyle.viewStyle" class>
            <DocumentCard
                v-for="item in list"
                :to="item.to"
                :title="item.title"
                :image="item.image"
                :content="item.content"
                :cardStyle="myStyle.cardStyle"
                :hasImage="hasImage"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import DocumentCard from "./smallComs/documentCard.vue";
import { defineProps } from "vue";

interface List {
    to: string,
    title: string,
    image: string,
    content: string
}
defineProps<{
    list: Array<List>,
    myStyle: {
        containerStyle: string,
        titleStyle: string,
        viewStyle: string,
        cardStyle: {
            containerStyle: string,
            imgContainerStyle: string,
            textContainerStyle: string,
            imageStyle: string,
            contentStyle: string,
            titleStyle: string,
            linkStyle: string
        }
    },
    title: string ,
    hasImage: boolean

}>()

</script>
<style lang="scss" scoped>
.containerStyle {
    flex-direction: column !important;
}
</style>